<template>
  <div>
    <div class="main">
      <div class="topBox">
        <div class="topBox-bottom">
          <div>
            当前位置:
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/mall/container' }">
                首页
              </el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/mall/shopcart' }">
                购物车
              </el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/mall/submitOrder' }">
                提交订单
              </el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/mall/confirmAnOrder' }">
                确认订单
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </div>
      <div class="bottomBox">
        <div class="submitBox">
          <div class="submitBox-order">
            <p>订单提交成功! 待支付</p>
            <p>￥{{ (subtotal / 100).toFixed(2) }}</p>
          </div>
        </div>
        <div class="selectBox">
          <div class="selectBox_left"></div>
          <div class="selectBox_right">
            <div class="select-blueLeft"></div>
            <div class="selectBox-way">请选择支付方式</div>
          </div>
        </div>
        <div class="Banktype">
          <div class="payment">网银支付</div>
          <div id="Banktype-yin">
            <div>
              <el-radio-group v-model="radio">
                <el-radio :label="3">
                  <img
                    src="../../../../public/confirmAnOrder/中国.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-radio-group v-model="radio">
                <el-radio :label="6">
                  <img
                    src="../../../../public/confirmAnOrder/建行.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-radio-group v-model="radio">
                <el-radio :label="9">
                  <img
                    src="../../../../public/confirmAnOrder/农行.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-radio-group v-model="radio">
                <el-radio :label="10">
                  <img
                    src="../../../../public/confirmAnOrder/招行.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-radio-group v-model="radio">
                <el-radio :label="11">
                  <img
                    src="../../../../public/confirmAnOrder/工行.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-radio-group v-model="radio">
                <el-radio :label="12">
                  <img
                    src="../../../../public/confirmAnOrder/交行.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-radio-group v-model="radio">
                <el-radio :label="13">
                  <img
                    src="../../../../public/confirmAnOrder/河北银行.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-radio-group v-model="radio">
                <el-radio :label="14">
                  <img
                    src="../../../../public/confirmAnOrder/民生银行.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="shortcut">快捷支付</div>
          <div class="wz">
            <div class="zhifubao">
              <!-- <el-checkbox v-model="checked">备选项</el-checkbox> -->
              <el-radio-group v-model="radio">
                <el-radio :label="15">
                  <img
                    src="../../../../public/confirmAnOrder/支付宝.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
            <div class="weixin">
              <el-radio-group v-model="radio">
                <el-radio :label="16">
                  <img
                    src="../../../../public/confirmAnOrder/微信.png"
                    alt=""
                  />
                </el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div class="payBox">
          <div class="payBox_left"></div>
          <div class="payBox_right">
            <div class="blue-left"></div>
            <div class="payPassword">支付密码</div>
          </div>
        </div>
        <div class="pleaseEnter">
          <p style="font-weight: 400; font-size: 16px">请输入支付密码</p>
          <input
            type="text"
            style="
              width: 238px;
              height: 50px;
              border: 1px solid #d0d0d0;
              outline: none;
              padding-left: 10px;
            "
          />
          <p
            style="
              font-weight: 400;
              font-size: 16px;
              color: #1289ff;
              cursor: pointer;
            "
          >
            忘记密码?
          </p>
        </div>
        <button
          style="
            width: 146px;
            height: 40px;
            border-radius: 4px;
            background: #1289ff;
            border: none;
            color: #fff;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            margin-top: 34px;
          "
        >
          立即支付
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrder } from "@/api/mallApi/getOrderSure/getOrderSure";
export default {
  name: "confirmAnOrder",
  components: {},

  data() {
    return {
      inputValue: "",
      radio: 0,
      confirmOrder: {},
      subtotal: 0,
    };
  },
  mounted() {
    this.subtotal = this.$route.query.subtotal;
  },
  activated() {},
  deactivated() {},
  methods: {
    //获取数据
  },
};
</script>


<style lang="scss" scoped>
* {
  list-style: none;
  box-sizing: border-box;
  padding: 0;
}
.main {
  width: 1340px;
  height: auto;
  margin: 0 auto;
  .topBox {
    width: 1340px;
    height: 200px;
    display: flex;
    flex-direction: column;
    .topBox-top {
      width: 1340px;
      height: 144px;
      border-bottom: solid 1px #1289ff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .logo {
        img {
          width: 233px;
          height: 55px;
        }
      }
      .searchBox {
        width: 643px;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        position: relative;
        .commodity {
          position: absolute;
          top: -25px;
          right: 542px;
          display: flex;
          justify-content: space-between;
          // margin-left: 50px;
          font-size: 14px;
          p {
            display: inline-block;
            width: 28px;
            height: 20px;
            cursor: pointer;
            margin: 0 5px;
          }
          .on {
            color: #1289ff;
          }
        }
        input {
          width: 532px;
          height: 45px;
          padding-left: 17px;
          line-height: 45px;
          outline: none;
          border: 1.5px solid #1289ff;
          border-radius: 4px;
        }
        button {
          font-size: 16px;
          width: 111px;
          height: 45px;
          background: #1289ff;
          color: #fff;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          margin-left: -5px;
        }
      }
      .shopCarBox {
        width: 140px;
        height: 45px;
        border: 1px solid #d3d3d3;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .topBox-bottom {
      width: 1340px;
      height: 56px;
      line-height: 56px;
      border-top: #1289ff 1px solid;
    }
  }
  .bottomBox {
    width: 1340px;
    height: auto;
    margin-top: -90px;
    .submitBox {
      width: 1340px;
      height: 38px;
      margin-left: -20px;
      .submitBox-order {
        margin-right: 1223.25px;
        width: 356.75px;
        height: 38px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      p {
        font-size: 22px;
        font-weight: 400;
      }
      :nth-child(2) {
        font-size: 26px;
        color: #ff6b00;
        font-weight: 700;
      }
    }
    .selectBox {
      margin-top: 35px;
      width: 1240px;
      height: 19px;
      margin-top: 31px;
      margin-bottom: 13px;
      display: flex;
      justify-content: space-around;
      .selectBox_left {
        height: 100%;
      }
      .selectBox_right {
        width: 100%;
        height: 100%;
        display: flex;
        .select-blueLeft {
          width: 4px;
          height: 100%;
          border-radius: 2px;
          background: #1289ff;
        }
        .selectBox-way {
          height: 100%;
          margin-left: 10px;
          font-weight: 500;
          font-size: 19px;
          line-height: 19px;
          color: #2b2b2b;
        }
      }
    }
    .Banktype {
      width: 1340px;
      height: 405px;
      margin-top: 17px;
      border-radius: 4px;
      background: #f8fbfd;
      .payment {
        width: 64px;
        height: 24px;
        margin-left: 18px;
        margin-top: 8px;
        margin-bottom: 22px;
      }
      #Banktype-yin {
        width: 1240px;
        height: auto;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 100px);
        grid-gap: 10px;
        div {
          width: 216px;
          height: 50px;
          ::v-deep  .el-radio__inner {
            border: 1px solid #dcdfe6;
            border-radius: 100%;
            width: 15px;
            height: 15px;
            margin-right: 11px;
            margin-bottom: 37px;
            cursor: pointer;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
          }
          .el-radio__input.is-checked .el-radio__inner::after {
            content: "";
            width: 10px;
            height: 5px;
            border: 1px solid white;
            border-top: transparent;
            border-right: transparent;
            text-align: center;
            display: block;
            position: absolute;
            top: 5px;
            left: 4px;
            vertical-align: middle;
            transform: rotate(-45deg);
            border-radius: 0px;
            background: none;
          }
        }
      }
    }
    .payBox {
      width: 1240px;
      height: 19px;
      margin-top: 31px;
      margin-bottom: 13px;
      display: flex;
      justify-content: space-around;

      .payBox_left {
        width: 20%;
        height: 100%;
      }
      .payBox_right {
        width: 80%;
        height: 100%;
        margin-left: -800px;
        display: flex;
        .blue-left {
          width: 4px;
          height: 19px;
          border-radius: 2px;
          background: #1289ff;
          margin-left: -50px;
        }
        .payPassword {
          margin-left: 10px;
          font-weight: 500;
          font-size: 19px;
          line-height: 19px;
          color: #2b2b2b;
        }
      }
    }

    .pleaseEnter {
      width: 479px;
      height: 50px;
      margin-right: 1101px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .shortcut {
      margin-left: 18px;
      margin-top: 30px;
      margin-bottom: 17px;
      font-weight: 400;
      font-size: 16px;
    }
    .wz {
      width: 1240px;
      height: auto;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 100px);
      grid-gap: 10px;
      div {
        width: 216px;
        height: 50px;
        ::v-deep .el-radio__inner {
          border: 1px solid #dcdfe6;
          border-radius: 100%;
          width: 15px;
          height: 15px;
          margin-right: 11px;
          margin-bottom: 37px;
          cursor: pointer;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        .el-radio__input.is-checked .el-radio__inner::after {
          content: "";
          width: 10px;
          height: 5px;
          border: 1px solid white;
          border-top: transparent;
          border-right: transparent;
          text-align: center;
          display: block;
          position: absolute;
          top: 5px;
          left: 4px;
          vertical-align: middle;
          transform: rotate(-45deg);
          border-radius: 0px;
          background: none;
        }
      }
    }
  }
}
</style>
